<template>
  <NodeViewWrapper class="vue-component" ref="ViewWrapper" contenteditable="false">
    <div contenteditable="false" class="numberPronunciation">
      <a-popover trigger="click">
        <template #content>
          <div style="border-radius: 5px; width: 256px; height: 145px;">
            <div class="box_1_top" style="border-bottom: 1px solid #e8e8e8;">
              <div v-for="(v1, index) in NumberData" :key="index"
                :style="{ color: v1.value === props.node.attrs['interpret-as'] ? '#096dd9' : '' }"
                @click="setNumberPronunciation(v1.value)">
                <div class="box_1_top_item" style="height: 36px; line-height: 36px;  cursor: pointer;">
                  {{ v1.label }}
                </div>
              </div>
            </div>
            <div class="box_1_del" style="height: 36px; display: flex; align-items: center; margin-top: 3px;"
              @click="del_node">
              移除
            </div>
          </div>
        </template>
        <!-- <span contenteditable="false">{{ props.node.attrs.text || '' }}</span> -->
        <NodeViewContent class="content" contenteditable="false" />

      </a-popover>
    </div>
  </NodeViewWrapper>
</template>

<script setup>
import { computed, ref } from 'vue'

import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
import {
} from "@ant-design/icons-vue";
const NumberData = ref([
  {
    label: "数字读法 (一百二十三万 一千两百三十四)",
    value: 'cardinal'
  },
  {
    label: "序列读法(一二三一二三四)",
    value: 'digits'
  },
  {
    label: "电话读法(幺二三 幺二三四)",
    value: 'telephone'
  }
])
const props = defineProps({
  node: Object
})

// 删除当前节点 将文本变为普通文本插入
const del_node = () => {
  const text = props.node.attrs.text + ''
  const pos = props.getPos(); // 获取当前节点的位置
  props.editor.chain()
    .focus()
    .setNodeSelection(pos)
    .setNumberPronunciationToText(text)
    .run()
}

const setNumberPronunciation = (value) => {
  props.node.attrs['interpret-as'] = value
}
</script>

<style lang="less" scoped>
.vue-component {
  display: inline-block;
  margin-right: 3px;

  .numberPronunciation {
    display: inline-block;
    // background-color: #9fc9fd;
    border-bottom: 2px solid #d26700;
    cursor: pointer;

  }

}

.box_1_top_item:hover,
.hover-class {
  background-color: #f4f4f4;
}


.box_1_del:hover {
  background-color: #f4f4f4;
}
</style>